<template>
    <div class="mine" @scroll="scroll">
        <!-- header -->
        <div class="header">
            <div class="headerBox">
                <ul class="userInfo">
                    <li class="portrait">
                        <img src="../../assets/images/mine/delete/tt.jpg" alt="">
                    </li>
                    <li class="info">
                        <div class="name">
                            Daisy
                        </div>
                        <div class="attention">
                            关注108
                        </div>
                    </li>
                    <li class="center">
                        <div>个人主页</div>
                    </li>
                </ul>
                <ul class="headerList">
                    <li>
                      <i class="yo-ico">&#xe615;</i>
                      <b>收藏</b> 
                    </li>
                    <li>
                        <i class="yo-ico">&#xe91b;</i>
                        <b>足迹</b>
                    </li>
                    <li>
                        <i class="yo-ico">&#xe620;</i>
                        <b>钱包</b>
                    </li>
                </ul>
                <div class="cardBox">
                    <ul class="card">
                        <li class="vip">
                            VIP卡
                        </li>
                        <li class="vipInfo">
                            开通即领百元红包
                        </li>
                        <li class="vipBtn">
                            <div>
                                立即开通
                            </div>
                        </li>
                        <img src="../../assets/images/mine/kuang.png" alt="">
                    </ul>
                </div>
            </div>
        </div>
        <div class="groupBox">
            <div class="group">
                <div class="title" >
                    我的订单
                    <div @click="orderHandler(0)">
                        查看全部<i class="yo-ico">&#xe63c;</i>
                    </div>
                </div>
                <ul class="content contentOne">
                    <li @click="orderHandler(1)">
                        <i class="yo-ico">&#xe60b;</i>
                        <b>待付款</b>
                    </li>
                    <li @click="orderHandler(2)">
                        <i class="yo-ico">&#xe708;</i>
                        <b>待发货</b>
                    </li>
                    <li @click="orderHandler(3)">
                        <i class="yo-ico">&#xe61b;</i>
                        <b>待收货</b>
                    </li>
                    <li @click="orderHandler(4)">
                        <i class="yo-ico">&#xe616;</i>
                        <b>评价</b>
                    </li>
                    <li>
                        <i class="yo-ico">&#xe636;</i>
                        <b>退货退款</b>
                    </li>
                </ul>
            </div>
        </div>
        <div class="groupBox">
            <div class="group">
                <div class="title">
                    常用工具
                </div>
                <ul class="content contentTwo">
                    <li>
                        <i class="yo-ico" style="color:#ffc71c">&#xe62c;</i>
                        <b>签到领积分</b>
                    </li>
                    <li>
                        <i class="yo-ico" style="color:#28d097">&#xe696;</i>
                        <b>客服</b>
                    </li>
                    <li>
                        <i class="yo-ico" style="color:#0099ff">&#xe672;</i>
                        <b>地址管理</b>
                    </li>
                    <li>
                        <i class="yo-ico" style="color:#ff6262">&#xe6d1;</i>
                        <b>分享有礼</b>
                    </li>
                    <li>
                        <i class="yo-ico" style="color:#666ee8">&#xe625;</i>
                        <b>意见反馈</b>
                    </li>
                    <li>
                        <i class="yo-ico" style="color:#3366ff;">&#xe696;</i>
                        <b>设置</b>
                    </li>
                </ul>
            </div>
        </div>



             <div class="groupBox">
            <div class="group">
                <div class="title">
                    常用工具
                </div>
                <ul class="content contentTwo">
                    <li>
                        <i class="yo-ico" style="color:#ffc71c">&#xe62c;</i>
                        <b>签到领积分</b>
                    </li>
                    <li>
                        <i class="yo-ico" style="color:#28d097">&#xe696;</i>
                        <b>客服</b>
                    </li>
                    <li>
                        <i class="yo-ico" style="color:#0099ff">&#xe672;</i>
                        <b>地址管理</b>
                    </li>
                    <li>
                        <i class="yo-ico" style="color:#ff6262">&#xe6d1;</i>
                        <b>分享有礼</b>
                    </li>
                    <li>
                        <i class="yo-ico" style="color:#666ee8">&#xe625;</i>
                        <b>意见反馈</b>
                    </li>
                    <li>
                        <i class="yo-ico" style="color:#3366ff;">&#xe696;</i>
                        <b>设置</b>
                    </li>
                </ul>
            </div>
        </div>


    </div>
</template>

<script>
export default{
    data(){
        return{
            navBarState:false
        }
    },
    methods:{
        orderHandler(index){
            this.$router.push({path:'/order',query: { active: index }})
        },
        scroll(e){
            // console.log('scroll', e.target.scrollTop)
            let num = e.target.scrollTop
                if(num > 60){
                    this.$emit("mine",false)
                }else{
                    this.$emit("mine",true)
                }
        }
    }
}
</script>


<style lang="stylus" scoped>
    @import '../../assets/iconfonts/common.css'
    @import '../../assets/stylus/border.styl'
    .mine
        display flex
        flex-direction column
        height 100%
        background #f2f2f2
        overflow scroll
        .header
            background url('../../assets/images/mine/bg.png') 
            background-size 100% 2.20rem
            height 2.2rem 
            position relative
            .headerBox
                height 100%
                color: #FFFFFF;
                padding-top: .2rem
                .userInfo 
                    display flex
                    justify-content center
                    width 100%
                    .portrait
                        flex 70
                        padding 0 0rem 0 .2rem
                        img 
                            width .56rem
                            height .56rem
                            border_1px(1px,white,solid,50%)
                    .info
                        flex 208
                        font-weight: 650;
                        font-style: normal;
                        font-size: .18rem;
                        line-height .38rem
                        text-align left 
                        .attention
                            font-size: .12rem;
                            line-height .12rem
                    .center
                        flex 88
                        position relative
                        div 
                            width .67rem
                            height .24rem
                            border-radius .24rem
                            background-color: rgba(255, 255, 255, 0.109803921568627)
                            line-height .24rem
                            text-align center
                            font-size .12rem
                            color white
                            position absolute
                            top 50%
                            margin-top -.12rem
                .headerList
                    display flex 
                    padding-top .16rem
                    li
                        flex 125  
                        display flex
                        flex-direction column
                        align-items center
                        justify-content center   
                        i 
                            font-size .2rem
                        b
                            font-size .12rem
                            line-height .30rem
                .cardBox
                    padding 0 .2rem 0 .2rem
                    .card
                        background: linear-gradient(-45deg, rgb(255, 199, 28) 0%, rgb(255, 199, 28) 0%, rgb(255, 98, 98) 98%, rgb(255, 98, 98) 100%);
                        flex 335
                        height .64rem
                        border-radius .1rem .1rem 0 0
                        display flex
                        line-height .64rem
                        position relative
                        margin-top .04rem
                        img 
                            position absolute
                            width .30rem
                            height .30rem
                            top .08rem
                            right 30%
                            transform: rotate(-60deg);
                        .vip
                            font-size .16rem
                            padding-left .1rem
                            flex 54
                            font-weight 650
                        .vipInfo
                            font-size .12rem
                            flex 194
                        .vipBtn
                            flex 88
                            div 
                                font-size .12rem
                                display inline-block
                                width .75rem
                                height .28rem
                                line-height .28rem
                                text-align center
                                background #fff
                                color #ff6262
                                border-radius .2rem
        .groupBox
            display flex
            justify-content center
            margin-top .1rem
            padding 0 .2rem 0 .2rem
            .group
                width 100%
                background #fff
                border-radius .08rem
                .title
                    height  .48rem
                    line-height .48rem
                    border_1px(0 0 1px 0,#f2f2f2)
                    position relative
                    padding-left .1rem
                    font-size .16rem
                    div 
                        i
                            font-weight 750
                        position absolute
                        right .1rem
                        top  0
                        font-size .12rem
                        color #999
                .content
                    display flex
                    width 100%
                    flex-wrap wrap
                    padding .12rem .1rem 0 .1rem
                    li
                        padding .12rem 0 .2rem
                        display flex
                        flex-direction column
                        align-items center
                        justify-content center
                        padding-top .02rem
                        color #666
                        font-size .12rem
                        font-weight 400
                        b
                            font-weight: 400;
                        i 
                            font-size .24rem
                            color #666ee8
                .contentOne
                    li
                        width .63rem
                .contentTwo
                    li
                        width .78rem



</style>
